<template>
    <div class="wrap" :id="id">
        <el-tree :data="element.data" default-expand-all :show-checkbox="element.attribute.treeHasCheckBox" :expand-on-click-node="false" @node-click="handleNodeClick" :check-strictly="!element.attribute.treeCheckStrictly" node-key="id" ref="tree" highlight-current :props="defaultProps" @check-change="handleCheckChange">
        </el-tree>
    </div>
</template>

<script>
import register from '@/js/main/register.js';
import bus from '@/js/event/bus.js';

export default {
    props: {
        element: {
            type: Object
        },
        id: {
            id: String
        },
        pageList: {
            require: true,
            type: Array
        },
        mode: {
            type: Number
        }
    },
    data() {
        return {
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            eventGroup: {}
        };
    },
    mounted() {},
    methods: {
        handleCheckChange(data, checked, indeterminate) {
            if (this.mode !== 2 || !this.element.event.length) {
                return;
            }
            bus.elementMouseEvent(this.element, checked ? 'check' : 'uncheck', { id: data.id });
        },
        handleNodeClick(data) {
            if (this.mode !== 2 || !this.element.event.length) {
                return;
            }
            bus.elementMouseEvent(this.element, 'select', { id: data.id });
        }
    },
    created() {
        register.addComponent(this);
    },
    destroyed() {
        register.removeComponent(this);
    }
};
</script>

<style lang="scss" scoped>
.wrap {
    width: 100%;
    height: 100%;
    overflow: auto;
    .el-tree {
        color: #ffffffc4;
    }
}

.el-tree-node {
    white-space: normal;
    font-size: 12px;
    font-family: 'OPPO';
    font-weight: normal;
    color: $white;
    margin-top: 5px;
    line-height: 18px;
    .el-tree-node__content {
        height: 100%;
        align-items: start;
    }
}

.is-focusable {
    background: $black;
}

.el-tree-node__content > .el-tree-node__expand-icon {
    line-height: 0;
}
.el-tree-node__content {
    height: 33px;
}
.el-tree-node:focus > .el-tree-node__content {
    background-color: transparent !important;
}
.expanded,
.el-tree-node__expand-icon,
.el-icon-caret-right {
    line-height: 0;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background: transparent;
}
.el-tree-node__content {
    align-items: flex-start;
}
.el-tree-node__content:hover {
    background: transparent;
}
.el-tree {
    background: transparent;
}
</style>
